<template>
  <div class="app-container">
    <el-tabs v-model="queryParam.orderState" tab-position="top" @tab-click="tabChange" class="tabs">
        <el-tab-pane v-for="item in tabs" :key="item.val" :label="item.labl + '(' + item.num + ')'"
            :name="item.val"></el-tab-pane>
    </el-tabs>

    <!-- 搜索区 -->
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true">

        <el-form-item label="订单编号" prop="number">
            <el-input v-model="queryParam.number" placeholder="请输入订单编号" clearable style="width: 240px"
                      @keyup.enter.native="handleQuery" />
       </el-form-item>

       <el-form-item label="下单日期"  >
           <el-date-picker v-model="createTimeValue" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"
               value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
               end-placeholder="结束日期" @change="changeEndTime"></el-date-picker>
       </el-form-item>


        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
    </el-form>


   <el-table :data="tableData.rows" border style="width: 100%" @selection-change="handleSelectionChange"   >
       <template slot="empty">
           <div class="data-empty">
               <img src="@/assets/empty.png" alt="暂无数据" />
               <span class="empty-text">暂无数据</span>
           </div>
       </template>
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="订单编号" prop="number"></el-table-column>
       <el-table-column label="下单时间" prop="orderTime"></el-table-column>
       <el-table-column label="手机号"  prop="phone"     />
       <el-table-column label="联系人"  prop="consignee"     />
       <el-table-column label="商家名称" prop="merchantName"></el-table-column>
       <el-table-column label="订单金额" prop="amount"></el-table-column>

       <el-table-column label="订单状态">
           <template slot-scope="scope">
                   <span v-if=" scope.row.status == 1  " class="tag-four">待付款</span>

                   <span v-if="scope.row.status == 2  " class="tag-one">待发货</span>

                   <span v-if="scope.row.status == 3 " class="tag-one">待收货</span>

                   <span v-if="scope.row.status == 4" class="tag-three">已完成</span>

                   <span v-if="scope.row.status == 5" class="tag-three">已取消</span>
               </span>
           </template>
       </el-table-column>


       <el-table-column label="操作" align="left"  class-name="small-padding fixed-width">
           <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="seeOrder(scope.row)"  >查看订单</el-button>

               <!-- 待付款状态 -->
               <span v-if="scope.row.status == 1 " class="operate">关闭订单</span>
               <!-- 待发货状态-->
               <span v-if="scope.row.status == 2"  class="operate">发货</span>
               <!-- 待收货状态-->
               <span v-if="scope.row.status == 3"  class="operate">确认收货</span>

           </template>
       </el-table-column>
   </el-table>


   <!-- 分页条 -->
   <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
                  :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>

<script>
  import PageMixin from '@/mixins/PageMixin.js'
  import AddOrEditMixin from '@/mixins/AddOrEditMixin.js'
  import DictMixin from '@/mixins/DictMixin.js'
  import {dataApi, orderStatistics} from '@/api/orders.js'
  export default {
     mixins: [DictMixin,PageMixin, AddOrEditMixin],
     data(){
       return {
         // 查询函数
         fetchDataApi: dataApi,
         queryParam: {
           page:1,
           size:10,
           orderState: "0"
          },
          primaryKey: 'id',
         // 头部导航数据  1待付款，2待派送，3已派送，4已完成，5已取消
         tabs: [
             { labl: "全部", num: "0", val: "0" },
             { labl: "待付款", num: "0", val: "1" },
             { labl: "待发货", num: "0", val: "2" },
             { labl: "已派送", num: "0", val: "3" },
             { labl: "已完成", num: "0", val: "4" },
             { labl: "已取消", num: "0", val: "5" }
         ],
       }
     },
     methods: {
       // 订单状态的筛选
       tabChange() {
           this.queryParam.page = 1;
           this.handleQuery();
       },
       changeEndTime(val) {
           if (val && val.length) {
               this.createTimeValue[1] = val[1].replace("00:00:00", "23:59:59");
           }
       },
       initFormValue(){
       },
       //计算订单统计数据
       fetchorderStatistics(){
         orderStatistics().then(resp=> {
           this.tabs = [
               { labl: "全部", num: resp.data.totalCount || 0, val: "0" },
               { labl: "待付款", num: resp.data.paymentOnBehalf || 0, val: "1" },
               { labl: "待发货",num: resp.data.consignment || 0, val: "2" },
               { labl: "已派送", num: resp.data.collectGoodsBehalf || 0, val: "3" },
               { labl: "已完成", num: resp.data.completed || 0, val: "4" },
               { labl: "已取消", num: resp.data.cancel || 0, val: "5" }
           ]
         })
       },
       //查看订单
       seeOrder(row){
          this.$router.push("/orders/detail/" + row.number);
       }
     },
     created(){
       this.initFormValue()
       this.fetchorderStatistics()
     }
  }
</script>

<style scoped="scoped">

  .tag-one,.tag-two,.tag-three,.tag-four,.tag-danger{
      position: relative;
      padding-left: 16px;
      &::before{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .tag-one::before{
      background-color: #1890FF;
    }
    .tag-two::before{
      background-color: #52C41A;
    }
    .tag-three::before{
      background-color: #C4C4C4;
    }
    .tag-four::before{
      background-color: #E6A23C;
    }
    .tag-danger::before{
      background-color: #F56C6C;
    }


  .operate {
    color: #1890FF;
    font-size: 12px;
    line-height: 22px;
    cursor: pointer;
    padding-left: 10px;
  }
</style>
